<template>
  <div>
    <!-- <component :is="v.component.name" :key="i" v-for="(v, i) in siteConfig.index"></component> -->
    
    <component :is="'navs'"></component>
     <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
     <b-modal id="modal1" title="Bootstrap-Vue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
    <!-- <component :is="'slide'"></component> -->
    <div id="rev_slider_wrapper" class="slider-container rev_slider_wrapper fullwidthbanner-container" style="overflow: visible; height: 375px;">
    </div>
    <h1 class="carousel-title">Garden Furniture Sale UK</h1>
    <div class="owl-data-carousel owl-carousel" :data-owl-settings='owlCarousel1.settings' :data-owl-responsive='owlCarousel1.responsive'>
      <div class="product" v-for="(v, i) in 6" :key="i">
        <figure class="product-image-container">
          <a href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-rattan-furniture-bistro-set-3-pcs-black.html" target="_blank"
            title="Rattan Garden Furniture Table and Chairs 3 Pieces" class="product-image-link">
            <img class="owl-lazy" src="~assets/image/blank.png" data-src="~assets/image/Rattan Garden Furniture Table and Chairs.png"
              width="195" height="255" alt="Rattan Garden Furniture Table and Chairs 3 Pieces">
          </a>
          <span class="product-label">-20%</span>
          <div class="product-action">
            <a target="_blank" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-rattan-furniture-bistro-set-3-pcs-black.html"
              class="btn-product btn-add-cart" title="Add Rattan Garden Furniture Table and Chairs to Bag">
              <i class="icon-product icon-bag"></i>
              <span>Add to Bag</span>
            </a>
          </div>
        </figure>
        <h3 class="product-title">
          <a target="_blank" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-rattan-furniture-bistro-set-3-pcs-black.html">Rattan Garden Furniture Table and Chairs</a>
        </h3>
        <div class="product-price-container">
          <span class="product-price">£102.99</span>
        </div>
      </div>
    </div>
    <div class="mb30 mb10-xs"></div>
    <div class="banner banner-fullwidth">
      <div class="banner-image-wrapper">
        <a target="_blank" title="Garden Furniture Sets Sale" href="gardenFurnitureSetsSale.html">
          <img src="~assets/image/Garden Furniture Sets Sale.png" alt="Garden Furniture Sets Sale" width="601">
        </a>
      </div>
      <div class="banner-content-wrapper">
        <h3>Garden Furniture Sets Sale</h3>
        <p>Starting at</p>
        <div class="banner-price">£39.99</div>
        <a target="_blank" title="Garden Furniture Sets Sale" href="gardenFurnitureSetsSale.html">Shop Now</a>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        <h3 class="carousel-title">BEST SELLERS</h3>
        <ul class="products-list">
          <li class="product">
            <figure class="product-image-container">
              <a target="_blank" title="Rattan Sun Lounger with Cushion" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-rattan-furniture-3-pc-sun-lounger-set-black.html">
                <img src="~assets/image/Rattan Sun Lounger.jpg" alt="Rattan Sun Lounger with Cushion">
              </a>
            </figure>
            <div>
              <div class="ratings-container">
                <div class="product-ratings">
                  <span class="ratings" style="width:100%"></span>
                </div>
              </div>
              <h4 class="product-title">
                <a target="_blank" title="Rattan Sun Lounger with Cushion" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-rattan-furniture-3-pc-sun-lounger-set-black.html">Rattan Sun Lounger with Cushion</a>
              </h4>
              <div class="product-price-container">
                <span class="product-price">£279.99</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-sm-4">
        <h3 class="carousel-title">SALE</h3>
        <ul class="products-list">
          <li class="product">
            <figure class="product-image-container">
              <a target="_blank" title="Folding Wooden Garden Table and Chairs" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-foldable-wooden-camping-picnic-table-set.html">
                <img src="~assets/image/Folding Wooden Garden Table and Chairs.jpg" alt="Folding Wooden Garden Table and Chairs">
              </a>
            </figure>
            <div>
              <div class="ratings-container">
                <div class="product-ratings">
                  <span class="ratings" style="width:100%"></span>
                </div>
              </div>
              <h4 class="product-title">
                <a target="_blank" title="Folding Wooden Garden Table and Chairs" href="https://www.aosom.co.uk/patio-lawn-garden/outsunny-foldable-wooden-camping-picnic-table-set.html">Folding Wooden Garden Table and Chairs</a>
              </h4>
              <div class="product-price-container">
                <span class="product-price">£50.99</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-sm-4">
        <h3 class="carousel-title">TRENDING ITEMS</h3>
        <div class="owl-data-carousel owl-carousel" :data-owl-settings='owlCarousel2.settings'>
          <div class="banner banner-image">
            <a target="_blank" title="Wooden Arc Hammock" href="https://www.aosom.co.uk/patio-lawn-garden/homcom-garden-wooden-double-hammock-swing-sun-bed-frame-stand.html">
              <img src="~assets/image/Wooden Hammock Chair.png" alt="Wooden Arc Hammock">
            </a>
            <div class="wanted-banner-content">
              <h4>13%
                <span>Off</span>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    head: {
      htmlAttrs: {
        'class': 'mobile'
      },
      link: [{
        rel: 'stylesheet',
        href: '/lib/owl.carousel/owl.carousel.min.css'
      }, {
        rel: 'stylesheet',
        href: '/lib/owl.carousel/owl.theme.default.min.css'
      }],
      script: [{
        src: '/lib/owl.carousel/owl.carousel.js',
        type: 'text/javascript'
      }]
    },
    components: {
      Navs: () => import (/* webpackChunkName: 'index' */ '../components/Nav.vue'),
      Slide: () => import (/* webpackChunkName: 'index' */ '../components/Slide.vue'),
      NavsEn: () => import (/* webpackChunkName: 'index_en' */ '../components/Nav_en.vue'),
      SlideEn: () => import (/* webpackChunkName: 'index_en' */ '../components/Slide_en.vue')
    },
    computed: {
      ...mapState([
        'products',
        'siteConfig'
      ])
    },
    data () {
      return {
        owlCarousel1: {
          settings: '{ "items":4, "nav": true, "dots":false, "lazyLoad": true }',
          responsive: '{ "480": {"items": 2}, "768": {"items": 3}, "992": {"items": 3}, "1200": {"items": 4} }'
        },
        owlCarousel2: {
          settings: '{ "items":1, "margin": 5, "loop": false, "nav": true, "dots":false }'
        },
        theme: 'red'
      }
    },
    mounted() {
      console.log(process.env.NODE_ENV)
      this.$nextTick(() => {
        $(function(){
          $('.owl-carousel').each(function(index, el) {
            var setting = $(this).data('owl-settings')
            var responsive = $(this).data('owl-responsive')
            if (responsive) {
              setting = $.extend(setting, {
                responsive: responsive
              })
            }
            $(this).owlCarousel(setting)
          })
        })
      })
    }
  }

</script>

<style scoped lang="less">
  @color: green;
  #rev_slider_wrapper {
    background-color: @color;
  }
  .carousel-title {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  /* Product */

  .product {
    margin-bottom: 20px;
  }

  .product .product-image-container {
    margin-bottom: 23px;
    position: relative;
    background-color: #f0f0f0;
  }

  @media (min-width: 1200px) {
    .owl-carousel .product .product-image-container {
      min-height: 255px;
    }
  }

  .product .product-image-container>.product-image-link {
    display: block;
  }

  .product .product-image-container>.product-image-link:before {
    content: '';
    display: block;
    /*background: radial-gradient(ellipse at center, #f4f4f4 0%, #f4f4f4 25%, rgba(244, 244, 244, 0) 100%);*/
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    transition: all 0.4s ease;
    visibility: hidden;
    opacity: 0;
  }

  .product .product-image-container img {
    display: block;
    width: 100%;
    height: auto;
  }

  .product .product-label {
    display: inline-block;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 10;
    color: #262634;
    background-color: #fff;
    font-weight: 500;
    /*font-size: 10px;*/
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.025em;
    padding: 4px 4px 2px;
    min-width: 39px;
    text-align: center;
  }

  .product .product-title {
    font-weight: 500;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #717179;
    margin-bottom: 1px;
  }

  .product .product-title a {
    color: #717179;
  }

  .product .product-title a:hover,
  .product .product-title a:focus {
    color: #262634;
  }

  .product .product-price {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    color: #262634;
  }

  .product .btn-quick-view {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 20;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.025em;
    padding: 4px 7px 2px;
    min-width: 85px;
    text-align: center;
    color: #a4abae;
    background-color: #fff;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
  }

  .product .btn-quick-view:hover,
  .product .btn-quick-view:focus {
    background-color: #a4abae;
    color: #fff;
  }

  .product .icon-product {
    display: inline-block;
    width: 19px;
    height: 19px;
    background-image: url("~assets/image/icon-product.png");
    background-repeat: no-repeat;
  }

  .product .icon-product.icon-heart {
    background-position: 0 0;
  }

  .product .icon-product.icon-bar {
    background-position: -19px 0;
  }

  .product .icon-product.icon-bag {
    background-position: -38px 0;
  }

  .product .product-action {
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
    display: -ms-flexbox;
    display: flex;
    align-itens: center;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 40;
  }

  .product .product-action .btn-product {
    display: inline-block;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    padding: 6px 0;
    margin: 0;
    border: none;
    transition: all 0.4s ease;
  }

  .product .product-action .btn-product>i,
  .product .product-action .btn-product>span {
    vertical-align: middle;
  }

  .product .product-action .btn-product.btn-wishlist,
  .product .product-action .btn-product.btn-compare {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background-color: #fff;
    width: 34px;
  }

  .product .product-action .btn-product.btn-wishlist:hover,
  .product .product-action .btn-product.btn-wishlist:focus,
  .product .product-action .btn-product.btn-compare:hover,
  .product .product-action .btn-product.btn-compare:focus {
    color: #fff;
    background-color: #a4abae;
  }

  .product .product-action .btn-product.btn-wishlist:hover .icon-product.icon-heart,
  .product .product-action .btn-product.btn-wishlist:focus .icon-product.icon-heart,
  .product .product-action .btn-product.btn-compare:hover .icon-product.icon-heart,
  .product .product-action .btn-product.btn-compare:focus .icon-product.icon-heart {
    background-position: 0 -19px;
  }

  .product .product-action .btn-product.btn-wishlist:hover .icon-product.icon-bar,
  .product .product-action .btn-product.btn-wishlist:focus .icon-product.icon-bar,
  .product .product-action .btn-product.btn-compare:hover .icon-product.icon-bar,
  .product .product-action .btn-product.btn-compare:focus .icon-product.icon-bar {
    background-position: -19px -19px;
  }

  .product .product-action .btn-product.btn-add-cart {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0 5px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #fff;
    background-color: #262634;
    padding-right: 2px;
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    .product-item .product .product-action .btn-product.btn-add-cart {
      padding-right: 0;
    }
  }

  .product .product-action .btn-product.btn-add-cart span {
    margin-left: 3px;
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    .product-item .product .product-action .btn-product.btn-add-cart span {
      display: none;
    }
  }

  .product .product-action .btn-product.btn-add-cart:hover,
  .product .product-action .btn-product.btn-add-cart:focus {
    background-color: #a4abae;
  }

  .product:hover .product-image-container>a:before {
    visibility: visible;
    opacity: 0.65;
  }

  .product:hover .btn-quick-view,
  .product:hover .product-action {
    visibility: visible;
    opacity: 1;
  }

  /*Banner*/

  .banner.banner-fullwidth {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-bottom: 57px;
  }

  .banner.banner-fullwidth .banner-content-wrapper {
    position: relative;
    color: #dbdbdb;
    background-color: #908b82;
    line-height: 1.5;
    letter-spacing: 0.05em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 270px;
    text-align: center;
  }

  .banner.banner-fullwidth .banner-content-wrapper p {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 300;
    line-height: 0.8;
  }

  .banner.banner-fullwidth .banner-content-wrapper h3 {
    text-transform: uppercase;
    font-size: 22px;
    color: #dadada;
    margin-bottom: 20px;
    margin-top: 42px;
  }

  .banner.banner-fullwidth .banner-content-wrapper .banner-price {
    font-weight: 300;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
  }

  .banner.banner-fullwidth .banner-content-wrapper .banner-price span {
    vertical-align: baseline;
    text-decoration: line-through;
    font-size: 16px;
    color: #c7c5c2;
    margin-left: 5px;
  }

  .banner.banner-fullwidth .banner-content-wrapper a {
    display: block;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: underline;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: #dadada;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
  }

  .banner.banner-fullwidth .banner-content-wrapper a:hover {
    color: #c7c5c2;
  }

  .banner.banner-fullwidth .banner-image-wrapper {
    position: relative;
  }

  .banner.banner-fullwidth .banner-image-wrapper a {
    display: block;
  }

  @media (max-width: 767px) {
    .banner.banner-fullwidth {
      -ms-flex-direction: column;
      flex-direction: column;
      margin-bottom: 35px;
    }
    .banner.banner-fullwidth .banner-content-wrapper {
      width: 100%;
      min-height: 215px;
    }
  }

  .carousel-title {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

</style>
